<template>
  <div :style="{height:fullHeight+'px'}" class="progress-com">
    <div :style="{height:height+'px',background:bg}" class="progress-body">
      <div :style="{height:fullHeight+'px',width:fullHeight+'px',border:'1px solid '+pointShadow,boxShadow:'inset 0 0 10px 0 '+pointShadow,left:'calc('+percentage+'% - '+((height*2)+'px)')}" class="point">
        <div :style="{height:height+'px',width:height+'px'}" class="center"></div>
      </div>
      <div :style="{height:height+'px',backgroundImage:fillColor,width:percentage+'%'}" class="progress-fill"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props:{
    bg:{
      type:String,
      default:'#21282e',
    },
    fill:{
      type:Array,
      default:()=>['#024c74','#12cdf3'],
    },
    percentage:{
      type:Number,
      default:0
    },
    height:{
      type:Number,
      default:6,
    }
  },
  computed:{
    pointShadow(){
      return this.fill[0]
    },
    fillColor(){
      let text='linear-gradient(to right,';
      this.fill.forEach(item=>{
        text+=item+',';
      })
      text=text.substr(0,text.length-1);
      text+=')';
      return text;
    },
    fullHeight(){
      return this.height*3;
    }
  }
}
</script>

<style scoped lang="scss">
.progress-com{
  width: 100%;
  position: relative;
  .progress-body{
    width: 100%;
    border-radius: 8px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    .progress-fill{
      border-radius: 8px;
    }
    .point{
      position: absolute;
      transform: translate(0,-50%);
      top: 50%;
      left: 0;
      border-radius: 50%;
      .center{
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        border-radius: 50%;
        background: #fff;
      }
    }
  }
}
</style>
